<template>
	<view class="container">
		<view class="content">
			<view class="content-tab d-rn d-ac d-ja">
				<view class="content-tab-one d-cw d-ac d-jc" v-for="(item, index) in 2" :key="index"
					@click="handleNav(index)">
					<text :class="navSts == index ? 'active' : 'outactive'">{{
					!index
						? $t('crew_scheduling')
						: index == 1
							? $t('shift_library_cycle_library')
							: index == 2
								? ""
								: $t('cycle_shift_library')
				}}</text>
					<text v-if="navSts == index"></text>
				</view>
			</view>

			<view class="rilis-top d-rn d-ac d-jb">
				<picker @change="bindPickerChange" :range="guzhuList" range-key="employeeName" class="picker">
					<view class="d-rn d-ac d-jc">
						<view class="picker-con d-cn d-jc d-ac">
							<view class="uni-input one-txt-cut" v-if="type.typeName">{{ type.typeName }}
							</view>
							<view class="uni-input one-txt-cut" v-else>{{ $t('all_members') }}</view>
						</view>
						<image src="../../static/img/bottom.png" mode="" class="bottom"></image>
					</view>
				</picker>
				<view class="" style="color: #eeeeee"> | </view>
				<view class="">
					<u-search :placeholder="$t('please_enter_member_name')" v-model="searchValue" @search="handleSearch"
						@custom="handleSearch"></u-search>
				</view>
			</view>

			<view class="mains-all d-rn d-ac">
				<view class="mains-all-title">
					<text>{{ $t('shifts') }}</text>
				</view>
				<scroll-view scroll-x="true" scroll-with-animation :scroll-into-view="minSelCrt" :enable-flex="true"
					:show-scrollbar="false" class="scrollview-box">
					<view class="mains-all-one">
						<text @click="handleGourl(item, index)" :id="'minCla' + index"
							v-for="(item, index) in banciList" :key="index"
							:class="tabNum == index ? 'actives' : 'outactives'">{{ item.classesName }}</text>
					</view>
				</scroll-view>
			</view>
			<view class="mains-all">
				<view class="mains-all-title">
					<text>{{ $t('cycle_shifts') }}</text>
				</view>
				<scroll-view scroll-x="true" scroll-with-animation :scroll-into-view="minSelCrts" :enable-flex="true"
					:show-scrollbar="false" class="scrollview-box">
					<view class="mains-all-one">
						<text @click="handleGourls(item, index)" :id="'minClas' + index"
							v-for="(item, index) in weekList" :key="index"
							:class="tabNums == index ? 'actives' : 'outactives'">{{ item.classeName }}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- @click="handleGoDetails" -->
		<view class="rili">
			<u-calendar ref="calendar" :nowMonth="nowMonth" :sts="false" :maxDate="maxDate" :minDate="minDate"
				@changeYear="changeYear" @handleGetRiFather="handleGetRiFather" @handleGetMonth="handleGetMonth"
				:dateLists="dateLists" :yearsNum="yearsNum"></u-calendar>
		</view>

		<view class="order d-cn d-je">
			<view class="order-table d-rn d-je d-ac">
				<u-icon name="arrow-left" color="#8F9BB3" size="32rpx" class="nexleft" @click="changeWeek(-7)"></u-icon>
				<view class="order-table-head d-cn d-as">
					<view class="order-table-head-right d-rn d-jb">
						<text class="d-rn d-jc" v-for="(weekName, i) in dayWeekList" @click="weekClick(i)">{{ weekName
							}}</text>
					</view>
				</view>
				<u-icon name="arrow-right" color="#8F9BB3" size="32rpx" class="nexleft"
					@click="changeWeek(+7)"></u-icon>
			</view>
			<view class="pople">
				<view class="pople-one" v-for="(item, index) in riliList" :key="index">
					<view class="pople-one-onlist d-rn">
						<view class="pople-one-onlist-left d-rn d-jc" @click="empNameClick(item)">
							{{ item.empName }}
						</view>
						<view class="pople-one-onlist-right d-rn d-jb">
							<view class="pople-one-onlist-right-one d-cn d-ac"
								:class="items.hasDate ? 'active' : 'outactive'" v-for="(items, indexs) in item.dayList"
								:key="indexs" @longtap="handleLong(items, indexs, index)"
								@click="handleAddBan(items, item, indexs, index)"
								@touchmove="touchMove($event, items, indexs, index)">
								<text v-if="items.date">{{ items.date.substring(8, 10) }}</text>
								<view class="pople-one-onlist-right-one-class d-cn d-ac d-jc"
									v-for="(itemq, indexq) in items.classesList" :key="indexq">
									<text class="one-txt-cut" :style="{ background: itemq.shiftColor }">{{
					itemq.shiftName }}</text>
								</view>
								<template v-if="items.customHolidayNames.length">
									<view class="pople-one-onlist-right-one-class d-cn d-ac d-jc"
										v-for="(holiday, holidayIndex) in items.customHolidayNames" :key="holidayIndex">
										<text class="one-txt-cut" style="background: #f8b501">{{ holiday }}</text>
									</view>
								</template>
								<template v-if="items.statutoryHolidays">
									<view class="pople-one-onlist-right-one-class d-cn d-ac d-jc">
										<text class="one-txt-cut" style="background: #f82201">{{
					items.statutoryHolidaysName }}</text>
									</view>
								</template>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <week></week> -->
			<!-- <el-calendar v-model="value">
			</el-calendar> -->
		</view>

		<view class="footer d-rn d-ac d-ja">
			<text class="d-rn d-ac d-jc" @click="handlePiLiang">{{ $t('back') }}</text>
			<text class="d-rn d-ac d-jc" @click="handleDele">{{ $t('clear') }}</text>
			<text class="d-rn d-ac d-jc" @click="updatePaiban">{{ $t('Save') }}</text>
			<text class="d-rn d-ac d-jc" @click="handleSend">{{ $t('publish') }}</text>
		</view>
		<!-- 选择年份 -->
		<u-picker :show="changeYearShow" :columns="columns" @cancel="changeYearShow = false"
			@confirm="changeYearConfirm" :defaultIndex="defaultIndex"></u-picker>
	</view>
</template>

<script>
import week from "../../components/weekTable/index.vue";
import moment from "moment";
import {
	classesList,
	cycleAllList,
	getClasses,
	userList,
	updateC,
	isPub,
} from "../../api/index.js";

function getWeekdays(dateArray) {
	console.log("🐛 ~ getWeekdays ~ dateArray:", dateArray)
	const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
	const result = [];
	dateArray.forEach(date => {
		const dayOfWeek = new Date(date).getDay();
		result.push(weekdays[dayOfWeek]);
	});
	return result;
}
export default {
	components: {
		week,
	},
	data() {
		return {
			changeYearShow: false,
			columns: [
				[2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030, 2031, 2032,
					2033, 2034, 2035, 2036, 2037, 2038, 2039, 2040, 2041, 2042, 2043, 2044, 2045
				]
			],
			show: true,
			mode: "range",
			phoneInfo: uni.getSystemInfoSync(),
			type: {
				typeName: "",
				typeId: "",
			},
			hostList: [{
				name: "新浪娱乐",
				id: 1,
				dosc: "2022.10.22 17:00",
			},
			{
				name: "直播娱乐",
				id: 2,
				dosc: "2022.10.22 17:00",
			},
			{
				name: "游玩娱乐",
				id: 3,
				dosc: "2022.10.22 17:00",
			},
			],
			topTitBox: 0,
			navSts: 0,
			tabNum: null,
			// 中部分类==选择
			minCla: 0,
			// 底部分类滑动描点
			minSelCrt: null,

			listss: [{
				month: "1",
				date: [{
					day: "1",
					value: [{
						name: this.$t('early_shift'),
					},
					{
						name: this.$t('late_shift'),
					},
					],
				},],
			},],
			searchValue: "",
			navSts: 0,

			tabNums: null,
			minClas: 0,
			// 底部分类滑动描点
			minSelCrts: null,

			tabNumss: 0,
			minClass: 0,
			// 底部分类滑动描点
			minSelCrtss: null,

			maxDate: "",
			minDate: "",

			// 班次
			banciList: [],

			//周期班
			weekList: [],
			// 选中周期班id
			week_id: "",
			// 状态
			numList: [{
				name: this.$t('all'),
				id: -1,
			},
			{
				name: this.$t('published'),
				id: 1,
			},
			{
				name: this.$t('unpublished'),
				id: 0,
			},
			],
			// 选中状态id
			class_id: "",
			// 当前月份
			nowMonth: "",
			// 日历
			riliList: [],
			// 历史数据
			riliListCopy: [],
			// 日历展示
			dayList: [],
			// 年
			needYear: "",
			// 月
			monthValue: "",
			// 雇主列表
			guzhuList: [],
			hasDate: false,
			classInfo: {},
			Arr: [],
			flag: 0,
			lastX: 0,
			lastY: 0,
			dateLists: [],
			year: "",
			dayNum: "",
			monthValue: "",
			yearMonthDay: "",
			needDate: "",
			scheduleList: [],

			nowDate: moment().startOf("week").add(1, "day"),
			yearsNum: "",
			employerId: uni.getStorageSync("curEmployerId"),
		};
	},
	onReady() {
		// 如果需要兼容微信小程序的话，需要用此写法
		// this.$refs.calendar.setFormatter(this.formatter)
	},
	onShow() {
		this.topTitBox = this.phoneInfo.statusBarHeight;
		var today = new Date();
		var year = today.getFullYear();
		this.year = today.getFullYear();
		this.yearsNum = today.getFullYear();
		this.defaultIndex = [this.columns[0].findIndex(v => v == this.yearsNum)]
		this.needYear = today.getFullYear();
		this.maxDate = year + "-12-31";
		this.minDate = year + "-1-1";
		this.nowMonth = today.getMonth();
		this.dayNum = today.getDate();
		let monthab = null;
		monthab = this.nowMonth + 1;
		if (monthab < 10) {
			monthab = "0" + monthab;
		}
		this.monthValue = monthab;
		if (this.dayNum < 10) {
			this.dayNum = "0" + this.dayNum;
		}
		this.yearMonthDay = this.year + "-" + monthab + "-" + this.dayNum;
		this.needDate = this.$commonFun.timesWeekA(this.yearMonthDay);
		// this.getdate(monthab);
		this.getclassesList();
		this.getcycleList();
		this.getuserList();
	},
	watch: {},
	methods: {
		changeYearConfirm(e) {
			console.log('e', e);
			this.yearsNum = e.value[0];
			this.changeYearShow = false;
			this.yearMonthDay = `${this.yearsNum}-${this.nowMonth < 10 ? "0" + this.nowMonth : this.nowMonth
				}-${this.dayNum}`;
			this.needDate = this.$commonFun.timesWeekA(this.yearMonthDay);
			if (this.needDate.length) {
				this.getdate();
			}
		},
		changeYear(flag) {
			this.changeYearShow = flag;
			console.log('点击了年份')
		},
		// 列全选
		weekClick(index) {
			let find = this.riliList.find((item) => !item.dayList[index].hasDate);
			this.riliList.forEach((item) => {
				this.$set(item.dayList[index], "hasDate", !!find);
			});
			this.$forceUpdate();
		},
		// 行全选
		empNameClick(item) {
			let find = item.dayList.find((item) => !item.hasDate);
			item.dayList.forEach((item) => {
				this.$set(item, "hasDate", !!find);
			});
			this.$forceUpdate();
		},
		getuserList() {
			userList({
				pageNum: 1,
				pageSize: 999,
				employerId: this.employerId,
			}).then((res) => {
				this.guzhuList = res.data.records;
				this.guzhuList.unshift({
					employeeName: this.$t('all_members'),
					id: null,
				});
			});
		},
		// current(e){
		// 	console.log('e: ',e);
		// },
		changeWeek(num) {
			console.log('nowMonth', this.nowMonth)
			this.nowDate = this.nowDate.add(num, "d");
			console.log(' this.nowDate', this.nowDate)
			this.getList(this.nowDate);
		},
		getList(firstDayOfWeek) {
			console.log('firstDayOfWeek', firstDayOfWeek)
			const days = [];
			for (let i = 0; i < 7; i++) {
				let date = moment(firstDayOfWeek).add(i, "day").format("YYYY-MM-DD");
				console.log('date', date)
				days.push(date);
			}

			// for (let item of days) {
			// 	console.log(item, '222222222')
			// 	item.checked = false;
			// 	if (this.dateDay == item.date) {
			// 		item.checked = true;
			// 	}
			// }

			this.dayList = days;
			this.needDate = days;
			this.getdate();
			console.log('this.dayList[0].substring(5, 7)', this.dayList[0].substring(5, 7))
			this.nowMonth = Number(this.dayList[0].substring(5, 7));

			this.yearsNum = Number(this.dayList[0].substring(0, 4));
		},
		// h获取班次
		getclassesList() {
			classesList().then((res) => {
				if (res.code == 200) {
					this.banciList = res.data.map((item) => {
						item.classesName = item.shiftName;
						return item;
					});
				}
			});
		},
		// 获取周期班
		getcycleList() {
			cycleAllList().then((res) => {
				if (res.code == 200) {
					this.weekList = res.data.map((item) => {
						item.classeName = item.cycleName;
						return item;
					});
				}
			});
		},
		getdate(params = {}) {
			this.Arr = [];
			this.riliList = [];
			getClasses({
				startTime: this.needDate[0],
				endTime: this.needDate[6],
				employeeId: this.type.typeId,
				employerId: this.employerId,
				...params,
			}).then((res) => {
				if (res.code == 200) {
					this.riliList = res.data;
					if (this.riliList && this.riliList.length) {
						this.dayWeekList = getWeekdays(this.riliList[0].dayList.map(v => v.date))
						console.log("🐛 ~ getdate ~ this.dayWeekList :", this.dayWeekList)
						this.riliList.forEach((item) => {
							item.dayList.forEach((q) => {
								q.hasDate = false;
							});
						});
					}

					this.riliList.forEach((item) => {
						let find = this.riliListCopy.find((i1) => item.empId === i1.empId);
						if (find) {
							item.dayList.map((v1, vi1) => {
								let find1 = find.dayList.find((v2) => v2.date === v1.date);
								if (find1) {
									this.$set(item.dayList, vi1, find1);
								} else {
									find.dayList.push(v1);
								}
							});
						} else {
							this.riliListCopy.push(item);
						}
					});
				}
			});
			this.$forceUpdate();
		},
		handleGetRiFather(e) {

		},
		bindPickerChange(e) {
			this.searchValue = "";
			console.log("🐛 ~ bindPickerChange ~ this.riliList:", this.riliList)

			this.type.typeName = this.riliList[e.detail.value].empName;
			this.type.typeId = this.riliList[e.detail.value].empId;
			this.getdate();
		},
		handleNav(index) {
			this.navSts = index;
			if (index == 1) {
				this.$commonFun.goUrl(1, "../shiftRoom/index");
			}
		},

		handleGourls(val, index) {
			if (!this.isSelectDate()) {
				this.$commonFun.showTips(this.$t('Please_select_the_date_to_schedule'));
				return;
			}
			this.tabNums = index;
			this.tabNum = null;
			this.week_id = val.id;
			if (index > 0 && index < this.numList.length) {
				this.$nextTick(() => {
					this.minSelCrts = "minClas" + (index - 2);
				});
			}
			console.log(val.shiftDTOList);
			let data = this.riliList.map((e) => {
				let filter = e.dayList.filter((c) => c.hasDate);
				return filter;
			});
			data.map((e) => {
				e.map((item, index) => {
					let num = index % val.shiftDTOList.length;
					if (item.classesList.length < 3 && val.shiftDTOList[num]) {
						item.classesList.push(val.shiftDTOList[num]);
					}
				});
			});
			console.log(data);
		},
		handleSearch() {
			this.type.typeName = "";
			this.type.typeId = "";
			this.getdate();
			// this.$commonFun.goUrl(1,'../addBanci/index')
		},
		handleGoDetails() {
			this.$commonFun.goUrl(1, "../zuyuanpaibanDetail/index");
		},
		handlePiLiang() {
			// this.$commonFun.goUrl(1, "../batchScheduling/index");
			uni.navigateBack();
		},
		handleGetMonth(e) {
			this.nowMonth = e + 1;
			this.yearMonthDay = `${this.yearsNum}-${this.nowMonth < 10 ? "0" + this.nowMonth : this.nowMonth
				}-${this.dayNum}`;
			this.needDate = this.$commonFun.timesWeekA(this.yearMonthDay);
			this.getdate();
			this.nowDate = moment([this.yearsNum, e, 1])
			this.getList(this.nowDate);
			console.log('切换月份')
		},

		handleDele() {
			if (!this.isSelectDate()) {
				this.$commonFun.showTips(this.$t('Please_select_the_date_to_clear_schedule'));
				return;
			}
			let that = this;
			uni.showModal({
				title: this.$t('prompt'),
				content: this.$t('clear_schedule_confirm'),
				cancelColor: '#353535',
				confirmColor: '#215AA0',
				cancelText: this.$t('cancel'),
				// showCancel: false,
				confirmText: this.$t('picker_confirm'),
				success: function (res) {
					if (res.confirm) {
						that.riliList.map((e) => {
							e.dayList.map((c) => {
								if (c.hasDate) {
									c.classesList = [];
								}
							});
						});
					} else if (res.cancel) { }
				}
			})

		},
		// 班次
		handleGourl(val, index) {
			if (!this.isSelectDate()) {
				this.$commonFun.showTips(this.$t('Please_select_the_date_to_schedule'));
				return;
			}
			this.tabNum = index;
			this.tabNums = null;
			this.class_id = val.id;
			if (index > 0 && index < this.numList.length) {
				this.$nextTick(() => {
					this.minSelCrt = "minCla" + (index - 2);
				});
			}

			this.riliList.map((e) => {
				e.dayList.map((c) => {
					if (c.hasDate) {
						if (c.classesList.length < 3) {
							c.classesList.push(val);
						}
					}
				});
			});
		},

		handleAddBan(date, employee, indexs, findex) {
			date.hasDate = !date.hasDate;
			this.$forceUpdate();
		},
		isSelectDate() {
			let flag = this.riliList.find((item) => {
				let find = item.dayList.find((child) => child.hasDate);
				return !!find;
			});
			return !!flag;
		},
		handleLong(items, indexs, index) {
			// console.log('长按==',items,indexs,index);
		},

		touchMove(e, items, indexs, index) {
			if (this.flag !== 0) {
				return;
			}
			let currentX = e.touches[0].pageX;
			let currentY = e.touches[0].pageY;
			let tx = currentX - this.lastX;
			let ty = currentY - this.lastY;
			let text = "";
			let isLrOrUd = Math.abs(tx) > Math.abs(ty);
			if (isLrOrUd) {
				text = tx < 0 ? this.$t('swipe_left') : this.$t('swipe_right');
				this.flag = tx < 0 ? 1 : 2;
			} else {
				text = ty < 0 ? this.$t('swipe_up') : this.$t('swipe_down');
				this.flag = ty < 0 ? 3 : 4;
			}
			// uni.showToast({
			// 	title: text,
			// 	icon: 'none'
			// });
			this.lastX = currentX;
			this.lastY = currentY;
		},

		updatePaiban() {
			this.riliListCopy.map((item) => {
				item.dayList.map((child) => {
					child.classesList.map((e) => {
						delete e.updateTime;
						delete e.createTime;
					});
				});
			});
			let obj = {
				// endTime: this.riliList[0].dayList[6].date,
				// startTime: this.riliList[0].dayList[0].date,
				scheduleList: this.riliListCopy.map((item) => {
					item.employerId = this.employerId;
					return item;
				}),
			};
			uni.showModal({
				title: this.$t('prompt'),
				content: this.$t('save_schedule_confirm'),
				cancelColor: '#353535',
				confirmColor: '#215AA0',
				cancelText: this.$t('cancel'),
				// showCancel: false,
				confirmText: this.$t('picker_confirm'),
				success:  (res)=> {
					if (res.confirm) {
						updateC(obj).then((res) => {
							if (res.code == 200) {
								this.$commonFun.showTips(res.msg);
								this.getdate(this.nowMonth);
							}
						});
					} else if (res.cancel) { }
				}
			})

		},

		handleSend() {
			let obj = {
				startTime: this.Arr[0],
				endTime: this.Arr[6],
				empIdList: this.riliList.map((item) => item.empId),
				employerId: this.employerId
			};
			uni.showModal({
				title: this.$t('prompt'),
				content: this.$t('publish_confirm'),
				cancelColor: '#353535',
				confirmColor: '#215AA0',
				cancelText: this.$t('cancel'),
				// showCancel: false,
				confirmText: this.$t('picker_confirm'),
				success:  (res)=> {
					if (res.confirm) {
						isPub(obj).then((res) => {
							if (res.code == 200) {
								this.$commonFun.showTips(res.msg);
								this.getdate(this.nowMonth);
							}
						});
					} else if (res.cancel) { }
				}
			})

		},
	},
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}

.container {
	width: 100%;

	.content {
		&-tab {
			background-color: #ffffff;
			padding: 24rpx 0;
			box-sizing: border-box;
			position: relative;
			border-bottom: 1px solid #f5f5f5;

			text:nth-of-type(1) {
				font-size: 30rpx;
			}

			text:nth-of-type(2) {
				width: 138rpx;
				height: 4rpx;
				background-color: #fdb911;
				position: absolute;
				top: 93%;
			}

			.active {
				color: #333333;
				font-weight: 500;
			}

			.outactive {
				color: #999999;
			}
		}

		.rilis-top {
			padding: 22rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			background-color: #ffffff;

			.bottom {
				width: 16rpx;
				height: 8rpx;
				margin-left: 10rpx;
			}
		}

		.mains {
			width: 100%;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid red;
			justify-content: space-between;
			margin-bottom: 30rpx;

			&-all {
				width: 100%;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				font-size: 16px;
				text-align: center;
				white-space: nowrap;
				border-bottom: 1px solid #eeeeee;
				background-color: #ffffff;

				scroll-view {
					width: 71%;
				}

				&-one {
					width: 100%;
					display: flex;
					align-items: center;
					flex-flow: row nowrap;
					padding: 0 20rpx;
					box-sizing: border-box;

					text {
						margin-right: 40rpx;
						font-size: 26rpx;
						color: #333333;
					}

					.actives {
						color: #ffd03d;
					}
				}

				&-title {
					padding: 22rpx 34rpx;
					box-sizing: border-box;

					text {
						display: inline-block;
						width: 100rpx;
						font-size: 28rpx;
						color: #333333;
						text-align: left;
					}
				}
			}
		}
	}

	.rili {
		margin-top: 20rpx;
		background-color: #ffffff;
	}

	.order {
		width: 100%;
		background-color: #f4f5f7;
		box-shadow: 1px 2px 7px 0px rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		padding-bottom: 140rpx;
		box-sizing: border-box;

		.nexleft {
			padding-top: 20rpx;
			box-sizing: border-box;
		}

		&-title {
			margin-bottom: 25rpx;

			text:nth-of-type(1) {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}

			text:nth-of-type(2) {
				width: 90rpx;
				height: 42rpx;
				border-radius: 2em;
				background-color: #f4f5f7;
				font-size: 24rpx;
				color: #999990;
			}
		}

		&-name {
			width: 100rpx;
			background-color: #f4f5f7;
			padding-left: 20rpx;
			padding-top: 110rpx;
			box-sizing: border-box;

			&-list {
				margin-top: 30rpx;

				&-one {
					margin-bottom: 40rpx;
				}
			}
		}

		&-table {
			width: 100%;
			background-color: #f4f5f7;
			padding: 20rpx 0px;
			padding-left: 38rpx;
			box-sizing: border-box;

			&-head {
				width: 90%;

				text {
					font-size: 26rpx;
					color: #999999;
					width: 80rpx;
				}

				&-left {
					width: 100rpx;
					padding-top: 60rpx;
					box-sizing: border-box;
				}

				&-right {
					width: 100%;
					margin-top: 20rpx;
				}
			}

			&-info {
				margin-top: 20rpx;

				&-one {
					width: 100%;
					padding-left: 10rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;

					&-date {
						width: 50rpx;

						&-one {
							text {
								width: 50rpx;
								display: block;
							}

							text:nth-of-type(1) {
								font-size: 26rpx;
								color: #333333;
								margin-bottom: 4rpx;
							}
						}
					}
				}
			}
		}

		.pople {
			width: 100%;

			&-one {
				width: 100%;
				margin-bottom: 10rpx;

				&-onlist {
					width: 100%;

					&-left {
						min-width: 80rpx;
						max-width: 80rpx;
						width: 80rpx;
						font-size: 20rpx;
					}

					&-right {
						width: 100%;
						padding-right: 40rpx;
						box-sizing: border-box;

						&-one {
							width: 80rpx;
							max-width: 80rpx;
							min-width: 80rpx;

							&-class {
								width: 100%;
								margin-bottom: 2rpx;

								text {
									display: block;
									min-width: 80rpx;
									max-width: 80rpx;
									width: 80rpx;
									text-align: center;
									color: #ffffff;
									font-size: 14rpx;
								}
							}
						}

						.outactive {}

						.active {
							background-color: #ffd03d;
						}
					}
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 106rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0%;
		left: 0%;

		text {
			width: 152rpx;
			height: 58rpx;
			border-radius: 2em;
			font-size: 26rpx;
		}

		text:nth-of-type(1) {
			border: 1px solid #e5e5e5;
		}

		text:nth-of-type(2),
		text:nth-of-type(3),
		text:nth-of-type(4) {
			border: 1px solid #fed227;
			background: #fed227;
		}
	}
}
</style>